
Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
	xtype: 'mypanel',
	id: 'mypanel',
	requires: ['Ext.ux.DateTimePicker'
	],
		listeners: {
		'deactivate': function(panel){
			panel.destroy();
		}
	},
	initialize: function() {
		var storage = window.localStorage;
		var userID = storage.getItem("UserID");
		
		var userIdField = Ext.getCmp('userId');
		userIdField.setValue(userID);
		console.log(userIdField.getValue());
		
		//Load the default settings
		var localstore = Ext.getStore("LocalSettings");
		localstore.load();
		var record = localstore.getAt(0);
		
		if  (typeof record != 'undefined'){
		
			if (record.data.sendcalendar == "true"){
				var cal = Ext.getCmp("calendar");
				cal.check();
			}
			
			if (record.data.sendmap == "true"){
				var map = Ext.getCmp("maplink");
				map.check();
			}
			
			if (record.data.sendreminder == "true"){
				var rem = Ext.getCmp("reminder");
				rem.check();
			}
			
			var msg = Ext.getCmp("message");
			msg.setValue(record.data.confirmationmessage);
			
		}
	},
    config: {
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Appointments',
				items: [
					{
						xtype: 'button',
						ui: 'small',
						text: 'Discard',
						handler: function(){
							var p = Ext.getCmp('mypanel');
							
							Ext.Viewport.setActiveItem('appointmentlist',{type:'slide', direction:'right'});
							p.destroy();
							
						}
					}
				]
            },
            
            // {
                // xtype: 'button',
                // docked: 'bottom',
                // ui: 'action',
                // text: 'Create Appointment',
				// handler: function() {
					// var form = Ext.getCmp('appointmentForm');
					// var values = form.getValues();
					
					// Ext.Ajax.request({
						// url: 'http://www.upto.ca/appointment/appointment.php',
						// params: values,
						
						// success: function(response){
							// var text = response.responseText;
							// var result = Ext.decode(text);
							// console.log(values.mobile);
							// var data = Ext.JSON.decode(response.responseText.trim());
							// url = "http://www.upto.ca/appointment/createappointment.php?id=" + data.id;
							// console.log(data.Success)
							// if (data.Success == 'true'){
								
							
							
								 // var message = "Appointment With: " + values.name + ".";
								 // console.log(values.calendar);
								 // console.log(values.maplink);
								 // if (values.calendar != null) {
									// message += " Download Calendar: " + url;
								 // }
								 
								 // if (values.maplink != null){
									// message += " Map Link: In Progress ";
								 // }
								 // console.log(message);
								// window.plugins.SmsPlugin.send(values.mobile, 
								// message, 
								// function () { 
								   // alert('Message sent successfully');	
								// },
								// function (e) {
									// alert('Message Failed:' + e);
								// }
							 // );
								// Ext.getCmp('mypanel').destroy();
								// Ext.Viewport.setActiveItem('viewport', {type:'slide', direction:'left'});
							// }
						// },
						
						// failure: function(response){
							// Ext.Msg.alert('error', 'error submitting appointment');
							// console.log(response.responseText);
						// }
					
					
					
					// });
					
				// }
            // },
            {
                xtype: 'formpanel',
				id: 'appointmentForm',
				itemId: 'appointmentForm',
                height: '100%',
                width: '100%',
                scrollable: true,
				url: 'http://www.upto.ca/appointment/appointment.php',
				standardSubmit: true,
                items: [
                    
                    {
						xtype: 'fieldset',
						centered: true,
						items: [
							{
								xtype: 'textfield',
								label: 'First',
								id: 'firstname',
								name: 'firstname'
							},
							{
								xtype: 'textfield',
								label: 'Last',
								id: 'lastname',
								name: 'lastname'
							},
							{
								xtype: 'numberfield',
								label: 'Phone',
								id: 'mobile',
								name: 'mobile'
							},
							{
								xtype: 'emailfield',
								label: 'Email',
								placeHolder: 'email@example.com',
								id: 'email',
								name: 'email'
							},
							{
								xtype: 'datepickerfield',
								label: 'Date',
								placeHolder: 'mm/dd/yyyy',
								id: 'date',
								name: 'date',
								value: new Date(),
								picker: {
									yearFrom: parseInt(getCurrentYear()),
									yearTo: parseInt(getMaxYear())
								},
								listeners: {
									change: function(value){
										console.log(value);
										console.log(value.data);
										//Ext.getCmp("starttime").setValue(value);
										//Ext.getCmp("endtime").setValue(value);
									}
								}
							},
							{
								xtype: 'datetimepickerfield',
								id: 'starttime',
								name : 'starttime',
								label: 'Start',
								//value: new Date(),
								dateTimeFormat: "g:i A",
								picker: {
									yearFrom: 2013,
									minuteInterval : 5,
									ampm : true,
									slotOrder: ['hour','minute','ampm']
								},
							},
							{
								xtype: 'datetimepickerfield',
								id: 'endtime',
								name : 'endtime',
								label: 'End',
								//value: new Date(),
								dateTimeFormat: "g:i A",
								picker: {
									yearFrom: 2013,
									minuteInterval : 5,
									ampm : true,
									slotOrder: ['hour','minute','ampm']
								}
							},
							{
								xtype: 'textareafield',
								label: 'Notes',
								id: 'notes',
								name: 'notes'
							},
							{
								xtype: 'textfield',
								label: 'Location',
								autoCapitalize: true,
								id: 'map',
								name: 'map'
							},
							{
								xtype: 'checkboxfield',
								label: 'Map',
								id: 'maplink',
								name: 'maplink'
							},
							{
								xtype: 'checkboxfield',
								label: 'Calendar',
								id: 'calendar',
								name: 'calendar'
							},
							{
								xtype: 'checkboxfield',
								label: 'Reminder',
								id: 'reminder',
								name: 'reminder'
							},
							{
								xtype: 'numberfield',
								label: 'Time',
								id: 'remindertime',
								name: 'remindertime'
							},
							{
								xtype: 'textareafield',
								height: 151,
								label: 'Message',
								id: "message",
								name: "message"
							},
							{
								xtype: 'hiddenfield',
								name: 'userId',
								value: 1,
								id: 'userId'
							},
							{
								xtype: 'hiddenfield',
								name: 'sentby',
								value: '',
								id: 'sentby'
							}
						]
					},
					{
						xtype: 'container',
						docked: 'bottom',
						layout: {
							type: 'hbox'
						},
						items: [
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action-small',
								text: '+Contact',
								id: 'contactbtn',
								config: {
									messageToSend: null
							
								},
								handler: function() {

									Ext.Ajax.request({
										url: 'http://www.appt.cc/submit.php',
										params: {url : "http://www.upto.ca/appointment/createappointment.php?id=154"},
										
										success: function(response){	
											Ext.getCmp("contactbtn").setMessageToSend(response.responseText);
											
										},
										
										failure: function(response){
											
											//Ext.Msg.alert('error', 'error submitting appointment');
											console.log(response.responseText);
										}	
									});	
									
									window.plugins.SmsPlugin.send('7096937160', 
										Ext.getCmp("contactbtn").getMessageToSend, 
										function () { 
										   alert('Message sent successfully');	
										},
										function (e) {
											alert('Message Failed:' + e);
										}
									);
									//cal.createEvent(title, location, description, startDateTime, endDateTime);


									
								}
							},
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action-small',
								text: 'Save',
								id: 'addAppSave',
								handler: function() {
									// var form = Ext.getCmp('appointmentForm');
									// var values = form.getValues();
									// var time = new Date(values.starttime);
									// values.starttime = time.toISOString();
									
									// var time2 = new Date(values.endtime);
									// values.endtime = time2.toISOString();
									
									// var date = new Date(values.date);
									// values.date = date.toISOString();
									
									
									// Ext.Ajax.request({
										// url: 'http://www.upto.ca/appointment/appointment.php',
										// params: values,
										
										// success: function(response){
											// var text = response.responseText;
											// var result = Ext.decode(text);
											// var data = Ext.JSON.decode(response.responseText.trim());

											
											
											// if (data.Success == 'true'){
												//refresh local store
												 // var localstore = Ext.getStore("LocalAppointments");
													
												// values.starttime = data.startTime;
												// values.endtime = data.endTime;
												// values.maplink = data.maplink;
												// values.calendar = data.calendar;
												// values.reminder = data.reminder;
												// values.date = data.date;
												
												// var newRecord = new MyApp.model.Appointments(values);
												// localstore.add(newRecord);
												// localstore.sync();
												
												// var p = Ext.getCmp('mypanel');
												// Ext.Viewport.setActiveItem('appointmentlist',{type:'slide', direction:'right'});
												// p.destroy();
											// }
										// },
										
										// failure: function(response){
											
											// Ext.Msg.alert('error', 'error submitting appointment');
											// console.log(response.responseText);
										// }	
									// });
									//this.fireEvent("saveAppointment");
								}
							},
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action-small',
								text: 'Email'
							},
							{
								xtype: 'button',
								flex: 1,
								height: 26,
								margin: 3,
								ui: 'action-small',
								text: 'Send SMS',
								id: 'saveSendSMS',
								handler: function() {
									// var sentBy = Ext.getCmp('sentby');
									// sentBy.setValue('SMS');
									// var form = Ext.getCmp('appointmentForm');
									// var values = form.getValues();
									// var time = new Date(values.starttime);
									// values.starttime = time.toISOString();
									
									// var time2 = new Date(values.endtime);
									// values.endtime = time2.toISOString();
									
									// var date = new Date(values.date);
									// values.date = date.toISOString();
									
									// Ext.Ajax.request({
										// url: 'http://www.upto.ca/appointment/appointment.php',
										// params: values,
										
										// success: function(response){
											// var text = response.responseText;
											// var result = Ext.decode(text);
											// console.log(values.mobile);
											// var data = Ext.JSON.decode(response.responseText.trim());
											// url = "http://www.upto.ca/appointment/createappointment.php?id=" + data.id;
											
											// if (data.Success == 'true'){
												
											
											
												 // var message = values.message;
												 // console.log(values.calendar);
												 // console.log(values.maplink);
												 // if (values.calendar != null) {
													// message += " Download Calendar: " + url;
												 // }
												 
												 // if (values.maplink != null){
													// message += " Map Link: In Progress ";
												 // }
												 // console.log(message);
												// window.plugins.SmsPlugin.send(values.mobile, 
													// message, 
													// function () { 
													   // alert('Message sent successfully');	
													// },
													// function (e) {
														// alert('Message Failed:' + e);
													// }
												// );
											    // var localstore = Ext.getStore("LocalAppointments");
												// values.starttime = data.startTime;
												// values.endtime = data.endTime;
												// values.maplink = data.maplink;
												// values.calendar = data.calendar;
												// values.reminder = data.reminder;
												// values.date = data.date;
												// var newRecord = new MyApp.model.Appointments(values);
												// localstore.add(newRecord);
												// localstore.sync();
												
												// Ext.getCmp('mypanel').destroy();
												// Ext.Viewport.setActiveItem('appointmentlist', {type:'slide', direction:'left'});
											// }
										// },
										
										// failure: function(response){
											// Ext.Msg.alert('error', 'error submitting appointment');
											// console.log(response.responseText);
										// }		
									// });
									
								}
							}
						]
					}
                ]
            }
        ]
    }

});
function getCurrentYear() {
    return new Date().getFullYear();
}


	function getMaxYear() {
		return new Date().getFullYear() + 5;
}